<template>
	<view class="app l_pages" :style="skin">
		<jnavbar title="余额提现"></jnavbar>
		<view class="page_container">
			<u-cell-group class="box">
				<u-cell-item hover-class="cell-hover-class" title="账户余额" :value="UserInfo.total" :arrow="false"></u-cell-item>
				<u-cell-item :title-style="titlestyle" hover-class="cell-hover-class" title="￥" :arrow="false">
					<!-- <input v-model="amount" v-numberinput ></input> -->
					<input class="NumInput" v-model="amount" v-numberinput.float="2" />
					<!-- <u-input placeholder="输入提现金额" v-numberinput.float="2" class="money" v-model="amount" type="digit"></u-input> -->
					<text slot="right-icon" @click="allamount">全部</text>
				</u-cell-item>
				<u-cell-item :arrow="false" title="手续费">
					<text>{{ service_charge }}</text>
				</u-cell-item>
				<u-cell-item v-if="is_online!='none'" @click="show = true" hover-class="cell-hover-class" title="提现方式">
					<text slot="right-icon">{{ is_online ? '线上打款' : '线下打款' }}</text>
				</u-cell-item>
				<u-cell-item v-if="!is_online" @click="getcardlist" hover-class="cell-hover-class" title="提现账号">
					<text slot="right-icon">{{ card.name || '请选择' }}</text>
				</u-cell-item>
				<u-cell-item :arrow="false" v-if="card.resource" @click="getcardlist" hover-class="cell-hover-class" title="账号">
					<text slot="right-icon">{{ card.resource.card }}</text>
				</u-cell-item>
		<!-- 		<u-cell-item  v-if="!is_online" title="收款码" :arrow="false">
					<view class=""slot="right-icon">
						<uploadimg :imglist="imgs" :maxnum="1" @getimg="getimg"></uploadimg>
					</view>
					</u-cell-item> -->
				
				<u-cell-item :arrow="false" v-if="integralBalance && (integralBalance.withdraw_limit || integralBalance.withdraw_service || integralBalance.is_free_fee)">
					<text v-if="integralBalance.withdraw_limit">金额满{{ integralBalance.withdraw_limit_cash }}可提现,</text>
					<text v-if="integralBalance.withdraw_service">手续费{{ integralBalance.service_charge }}%</text>
					<text v-if="integralBalance.is_free_fee">免手续费区间:{{ integralBalance.free_fee_section[0] + '-' + integralBalance.free_fee_section[1] }}</text>
				</u-cell-item>
			</u-cell-group>
			<view class="btns" v-if="is_online!='none'">
				<!-- #ifdef MP-WEIXIN -->
				<u-button :disabled="amount - withdraw_limit_cash < 0" @click="requestSubscribe" type="primary" shape="circle">申请提现</u-button>
				<!-- #endif -->
				<!-- #ifndef MP-WEIXIN -->
				<u-button :disabled="amount - withdraw_limit_cash < 0" @click="withdraw" type="primary" shape="circle">申请提现</u-button>
				
				<!-- #endif -->
			</view>

			<u-popup v-model="show" mode="bottom">
				<u-cell-group>
					<u-cell-item v-if="online_value" @click="change_online(1)" :arrow="false" hover-class="cell-hover-class" title="线上打款">
						<text :class="is_online ? 'active' : ''" class="iconfont el-sc-dui4" slot="icon"></text>
						<text>{{ online_value }}</text>
					</u-cell-item>
					<u-cell-item v-if="outonline_value" @click="change_online(0)" :arrow="false" hover-class="cell-hover-class" title="线下打款">
						<text>{{ outonline_value }}</text>
						<text :class="!is_online ? 'active' : ''" class="iconfont el-sc-dui4" slot="icon"></text>
					</u-cell-item>
				</u-cell-group>
			</u-popup>
			<u-popup v-model="show_card" mode="center">
				<view class="card_div">
					<u-cell-group v-if="cardlist.length > 0">
						<u-cell-item @click="getcarditem(item)" hover-class="none" :arrow="false" v-for="(item, i) in cardlist" :title="item.name" :value="item.resource.card">
							<text :class="item.checked ? 'active' : ''" class="iconfont el-sc-dui4" slot="icon"></text>
						</u-cell-item>
					</u-cell-group>
					<view v-else class="u-flex bind_card"><text @click="bindcard">绑定账号</text></view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
import {mapState, mapMutations} from 'vuex';
import util from '@/common/util.js';
export default {
	data() {
		return {
			imgs:[],
			receipt_img:'',
			agentdetail: {},
			amount: 0,
			titlestyle: {
				'font-size': '60rpx'
			},
			withdraw_limit_cash: 0.01,
			show: false,
			show_card: false,
			cardlist: [],
			card: {},
			integralBalance: null,
			type_value: '请选择',
			online_value: '',
			outonline_value: '',
			is_online: 1,
			onlinelist: [
				{
					type: '1',
					value: '微信余额',
					checked: false
				}
			],
			outonlinelist: [
				{
					type: '1',
					value: '微信',
					checked: false
				},
				{
					type: '2',
					value: '支付宝',
					checked: false
				},
				{
					type: '3',
					value: '银行卡',
					checked: false
				}
			]
		};
	},

	computed: {
		service_charge() {
			if (this.integralBalance) {
				if (this.integralBalance.withdraw_service) {
					let a = (this.integralBalance.service_charge * this.amount) / 100;

					if (this.integralBalance.is_free_fee) {
						if (this.integralBalance.free_fee_section[0] < a && a < this.integralBalance.free_fee_section[1]) {
							return 0.0;
						} else {
							return a.toFixed(2);
						}
					} else {
						return a.toFixed(2);
					}
				} else {
					return 0.0;
				}
			} else {
				return 0.0;
			}
		},
		...mapState({
			UserInfo: state => state.userInfo,
			skin: state => state.skin
		})
	},
	async onLoad() {
		await this.$getWx;
		this.getconfiguration();
		// #ifdef MP-WEIXIN
		this.wxamessage();
		// #endif
	},
	directives: {
		numberinput: {
			bind: function(el, binding, vnode) {
				const ele = el.tagName === 'INPUT' ? el : el.querySelector('input');
				ele.addEventListener('input', util.onInput(el, ele, binding, vnode), false);
			}
		}
	},
	methods: {
		allamount(){
			this.amount=Number(this.UserInfo.total)
		},
		messageresult(data) {
			this.$http('/wx/tool/wxa/message/result', data, 'POST').then(res => {
				this.withdraw();
			});
		},

		requestSubscribe() {
			var _this = this;
			if (_this.tmplIds.length > 0) {
				wx.requestSubscribeMessage({
					tmplIds: _this.tmplIds,
					success(res) {
						delete res.errMsg;
						let data = {
							data: JSON.stringify(res)
						};
						_this.messageresult(data);
					},
					fail(res) {
						_this.withdraw();
					},
					complete(res) {
						console.log(res);
					}
				});
			} else {
				this.withdraw();
			}
		},
		wxamessage() {
			this.$http('/wx/tool/wxa/message/withdraw', {}, 'GET').then(res => {
				this.tmplIds = res.data.msg;
			});
		},
		getcardlist() {
			let data = {};
			this.$http('/user/card/list?page=1&size=100', data, 'POST').then(res => {
				let list = res.data.msg.data;
				list.forEach(a => {
					if (a.id == this.card.id) {
						a.checked = true;
					} else {
						a.checked = false;
					}
				});
				this.cardlist = list;
				this.show_card = true;
			});
		},
		getcarditem(item) {
			this.cardlist.forEach(a => {
				a.checked = false;
			});
			item.checked = true;
			this.card = item;
			this.show_card = false;
		},
		change_online(is_online) {
			this.is_online = is_online;
			this.show = false;
		},
		getconfiguration() {
			this.getjuris('integralBalance').then(res => {
				this.integralBalance = res;
				if (this.integralBalance.withdraw_limit) {
					this.withdraw_limit_cash = this.integralBalance.withdraw_limit_cash;
				}
				let a = [];
				this.onlinelist.forEach(b => {
					if (this.integralBalance.withdraw_type.indexOf(b.type) > -1) {
						a.push(b.value);
					}
				});
				if(a.length==0){
					this.is_online=false
				}
				this.online_value = a.join(',');
				var c = [];
				this.outonlinelist.forEach(d => {
					if (this.integralBalance.withdraw_type_outline.indexOf(d.type) > -1) {
						c.push(d.value);
					}
				});
				if(a.length==0&&c.length==0){
					this.is_online='none'
				}
				this.outonline_value = c.join(',');
			});
		},
		withdraw() {
			let params = {
				amount: this.amount,
				is_online: this.is_online,
			};
			
			if (!this.is_online) {
				if (this.card.name) {
					params.card = JSON.stringify(this.card);
				} else {
					uni.showToast({
						title: '请选择账号',
						icon: 'none'
					});
					return false;
				}
			}
			this.$http('/user/withdraw', params, 'POST').then(res => {
				uni.showToast({
					title: '提现申请成功。',
					icon: 'none'
				});
				setTimeout(uni.navigateBack(), 1000);
			});
		},
		bindcard() {
			this.show_card = false;
			this.Jumpurl({
				type: 1,
				link: '/pages/mine/card/card',
				login_type: 2
			});
		}
	}
};
</script>

<style lang="scss" scoped>
.box {
	// margin-bottom: 20rpx;
}
.money {
	height: 160rpx;
	/deep/input {
		font-size: 64rpx;
	}
}
.NumInput {
	font-size: 44rpx;
	color: #000000;
	color: #303133;
	flex: 1;
	text-align: left;
}
.btns {
	margin: 64rpx 32rpx;
	position: fixed;
	bottom: 30rpx;
	width: calc(100% - 64rpx);
}
.card_div {
	width: 560rpx;
	background-color: #ffffff;
}
.iconfont {
	margin-right: 10rpx;
}
.active {
	color: var(--main-color);
}
.bind_card {
	height: 100rpx;
	align-items: center;
	justify-content: center;
	color: var(--main-color);
	text-decoration: underline;
}
</style>
